$(function(){
    function image(imgurl) {   //imgurl   本地图片路径  
        var img = imgurl;
        function getBase64Image(img) {
         var canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
         var dataURL = canvas.toDataURL("image/" + ext);
         return dataURL;
        }
       
        var image = new Image();
        image.src = img;
        image.onload = function() {
         var base64 = getBase64Image(image);    //转换之后的图片路径
         console.log(base64)
        }
     }

    {
        // 点击切换
        $('.menu li').click( function(){
            $(this).addClass('on').siblings().removeClass('on')
        })
    }

    {
        // 点击跳转
        $('.add1').click(function(){
            console.log($('#iframe').attr('src','./user/账号绑定.html'))
        })
    }

    {
        // 点击跳转
        $('.add2').click(function(){
            console.log($('#iframe').attr('src','./user/个人信息.html'))
        })
    }

    {
        // 输入框剩余字数
        var sum = 128
        var html_str = ''
       $('.sr-rq textarea').on('input',function(){
           var sum2 =  sum - $(this).val().length
           if(sum2 >= 0){
            html_str = `
            还可以输入${sum2}个字符
                `
            $('.sr-rq p').html(html_str)
           }else if(sum2 < 0){
            html_str = `
                已超出<a>${sum2 * -1}</a>个字符
                `
            $('.sr-rq p').html(html_str)
           }
       })
    }

    {
        // 点击关闭修改
        $('.main-gr-top a').click(() =>{
            console.log(123)
            window.parent.$('.xg').show()
            window.parent.$('.mubu').show()
        }) 
    }

    {
        // 点击关闭修改
        $('.xg-bottom a').click( () =>{
            $('.xg').hide()
            $('.mubu').hide()
        }) 
    }

    {
        // 点击开启修改
        $('.xg-top a').click( () => {
            $('.xg').hide()
            $('.mubu').hide()
        })
    }

    // 个人用户界面跳转到修改用户界面
    {
        $('.main-head-sz').click( () =>{
            location.href = '/用户界面/修改用户界面.html'
        })
    }

    // 更改头像滑入/滑出
    {
        $('.one-top').mouseover( () =>{
            $('.avator').css({ bottom:0 })
        })

        $('.one-top').mouseout( () =>{
            $('.avator').css({ bottom:-30 })
        })
    }
    
    // 更改头像弹窗显示/隐藏
    {
        $('.avator').click( () =>{
            $('.mubu').show()
            $('.change').show()
        })
    }

    {
        $('#upload').click( () =>{
            $('#file').click()
        })

        $('#file').on('change',function(){
            const file = this.files[0]
            const url = window.URL.createObjectURL(file)
            $(".upload-img").attr('src',url)
        })

        $('.change-title a').click( () =>{
            $('.mubu').hide()
            $('.change').hide()
        })
       
        $('.b1').click( () =>{
            $('.mubu').hide()
            $('.change').hide()
            const query = {
                avatar:image($(".upload-img").attr('src')),
                uid:1,
            }
            $.post('/my/update/avatar',query,res =>{
                console.log(res)
            })
        })

        $('.b2').click( () =>{
            $('.mubu').hide()
            $('.change').hide()
        })
    }
})